From: Jonas Dreßler <verdre@v0yd.nl>
Date: Sat, 9 Aug 2025 17:40:54 +0000 (+0200)
Subject: st/scroll-bar: Use an StWidget for the handle rather than a button
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~104^2^2~32
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=38e05347c0db365fdded8515f5239f6b46f3b104;p=gnome-shell.git

st/scroll-bar: Use an StWidget for the handle rather than a button

When we'll port the StScrollBar to use the new ClutterPanGesture, the
StButtons internal click gesture would interfere with the :active state of
the handle, because we set it in two places now: Here in StScrollBar, and in
StButton. Due to the order of gesture state changes when the scroll bar
handle pan gesture recognizes and cancels the button click gesture, the
active state will end up not being set during the actual pan.

To fix this, avoid using an StButton for the pan, and instead use a simple
StWidget.

While at it, change the CSS selector to be based on class name, not on ID.
IDs in CSS should be unique, and scroll bar handles are used more than once
in our UI.

Also, because apparently there's a Croco or St CSS parsing bug, select the
.vhandle/.hhandle class using the ">" child selector, as selecting just by
class doesn't do the trick :/

am

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2853>
---

diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index 85fc6dc94..94e84bab3 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -256,7 +256,7 @@ $_gdm_dialog_width: 25em;
 
 // Notifications
 #unlockDialogNotifications {
-  StButton#vhandle, StButton#hhandle {
+  > .vhandle, > .hhandle {
     background-color: transparentize($bg_color,0.7);
     &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
     &:active { background-color: st-transparentize(-st-accent-color,0.5); }
diff --git a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
index 77cde6533..1a7d17fc7 100644
--- a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
+++ b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
@@ -18,7 +18,7 @@ StScrollBar {
     background-color: transparent;
   }
 
-  StButton#vhandle, StButton#hhandle {
+  > .vhandle, > .hhandle {
     border-radius: 8px;
     background-color: mix($fg_color, $bg_color, 30%);
     border: 3px solid transparent; //would be nice to margin or at least to transparent
diff --git a/src/st/st-scroll-bar.c b/src/st/st-scroll-bar.c
index 9c2f4b54c..32dbcd7e3 100644
--- a/src/st/st-scroll-bar.c
+++ b/src/st/st-scroll-bar.c
@@ -129,11 +129,10 @@ st_scroll_bar_set_orientation (StScrollBar        *bar,
   priv->orientation = orientation;
 
   if (priv->orientation == CLUTTER_ORIENTATION_VERTICAL)
-    clutter_actor_set_name (CLUTTER_ACTOR (priv->handle),
-                        "vhandle");
+    st_widget_set_style_class_name (ST_WIDGET (priv->handle), "vhandle");
   else
-    clutter_actor_set_name (CLUTTER_ACTOR (priv->handle),
-                        "hhandle");
+    st_widget_set_style_class_name (ST_WIDGET (priv->handle), "hhandle");
+
   clutter_actor_queue_relayout (CLUTTER_ACTOR (bar));
   g_object_notify_by_pspec (G_OBJECT (bar), props[PROP_ORIENTATION]);
 }
@@ -943,8 +942,10 @@ st_scroll_bar_init (StScrollBar *self)
   g_signal_connect (priv->trough, "leave-event",
                     G_CALLBACK (trough_leave_event_cb), self);
 
-  priv->handle = (ClutterActor *) st_button_new ();
-  clutter_actor_set_name (CLUTTER_ACTOR (priv->handle), "hhandle");
+  priv->handle = (ClutterActor *) g_object_new (ST_TYPE_WIDGET, NULL);
+  st_widget_set_track_hover (ST_WIDGET (priv->handle), TRUE);
+
+  st_widget_set_style_class_name (ST_WIDGET (priv->handle), "hhandle");
   clutter_actor_add_child (CLUTTER_ACTOR (self),
                            CLUTTER_ACTOR (priv->handle));
   g_signal_connect (priv->handle, "button-press-event",